<!doctype html>
<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
<!--[if lt IE 7]> <html class="no-js ie6 oldie" lang="en"> <![endif]-->
<!--[if IE 7]>    <html class="no-js ie7 oldie" lang="en"> <![endif]-->
<!--[if IE 8]>    <html class="no-js ie8 oldie" lang="en"> <![endif]-->
<!-- Consider adding an manifest.appcache: h5bp.com/d/Offline -->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
	<meta charset="utf-8">
  
	<!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame
		 Remove this if you use the .htaccess -->
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  
	<title>GeoPortal - Mecklenburg County GIS</title>
	<meta name="description" content="GeoPortal - One stop shopping for location information.">
	<meta name="author" content="Tobin Bradley">
	
	<!-- Allow all robots -->	
	<meta content="all" name="robots" />
	
	<!-- turn off IE image toolbar -->
    <meta content="no" http-equiv="imagetoolbar" />
  
	<!-- Mobile viewport optimized: j.mp/bplateviewport -->
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
  
	<!-- Place favicon.ico & apple-touch-icon.png in the root of your domain and delete these references -->
	<link rel="shortcut icon" href="favicon.ico">
	<link rel="apple-touch-icon" href="apple-touch-icon.png">

	<!-- These two lines only for use with Leaflet backend - remove if not needed -->
	<link rel="stylesheet" href="js/libs/leaflet/leaflet.css" />
	<!--[if lte IE 8]><link rel="stylesheet" href="js/libs/leaflet/leaflet.ie.css" /><![endif]-->

	<!-- jQuery UI CSS -->
	<link type="text/css" media="all" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/themes/smoothness/jquery-ui.css" rel="stylesheet" />
	
	<!-- CSS: implied media="all" -->
	<link rel="stylesheet" href="css/style.css">
  
	<!-- All JavaScript at the bottom, except for Modernizr which enables HTML5 elements & feature detects
		Note this modernizr build only contains HTML5 shim/iepp, modernizr.load, add css classes, and
		geolocation api. You can build your own with additional features at http://www.modernizr.com/ -->
	<script src="js/libs/modernizr.custom.js"></script>

</head>

<body>

	<div id="container">
		<header>
            <!-- Header logo -->            
            <div id="logo" class="logo alignleft">
                <img src="img/gp_logo.png" />
            </div>
            
            <div id="searchdiv" class="screen-only">
				<input id="searchinput" class="ui-corner-all inset" x-webkit-speech speech placeholder="Start here!" />
                <p><a href="javascript:void(0)">Help</a></p>
			</div>
            
			<div id="toolbar" class="screen-only ui-widget-header hidden">
				<div id="mapcontrols">
					<input type="radio" id="navigate" name="mapcontrol-button" value="none" checked="checked" /><label for="navigate">Navigate</label>
					<input type="radio" id="measure" name="mapcontrol-button" value="measure" /><label for="measure">Measure</label>
					<input type="radio" id="identify" name="mapcontrol-button" value="identify" /><label for="identify">Identify</label>
				</div>
				<div id="toolbar-text-output" class="alignright textright">
					<span id="toolbar-area"></span>
					<span id="toolbar-length"></span>
					<br />
					<span id="toolbar-coords"></span>
				</div>
			</div>
            
		</header>
		
		<!-- side bar -->   
		<aside>
			
            <!-- Data Accordion -->
            <div id="accordion-data" class="accordion hidden">
                <h3 id="WELCOME"><a href="#">Welcome</a></h3>
                <div>
                    <p>Use the search bar to begin (<a href="javascript:void(0)" id="searchoptions">options</a>). For assistance, check out our <a href="http://www.youtube.com/watch?v=MNX2p1su3K0" target="_blank">video tutorial</a>. 
                    </p>
                    <p>GeoPortal is an advanced web mapping system created by Mecklenburg County GIS. Its mission is to be an easy to use "portal" into
                    Mecklenburg County's data and services.</p> <p>This site is powered by <a href="http://en.wikipedia.org/wiki/Open_source" target="_blank" >free and open source software</a>.
                    The source code for this site is released under the <a href="http://en.wikipedia.org/wiki/MIT_X11" target="_blank">MIT free software license</a> and can be downloaded <a href="http://fuzzytolerance.info/projects/" target="_blank">here</a>.</p>
                    
                    <p class="gpslocation hidden"><img src="img/target-icon.png" alt="Where am I?" /><a href="javascript:void(0)" id="gogpslocation">Follow My Location</a></p>
                    
                    <div>
                        <h5>Search Results</h5>
                        <span class="selectedLocation">No records selected.</span>
                    </div>
                </div>
                <h3 id="TRANSPORTATION"><a href="#">Transportation</a></h3>
                <div>
                    <div class="selectedLocation">No property currently selected.</div>
                    <div id="bus-stops" class="selected-data hidden">
                        <table class="datatable">
                            <caption>10 Nearest CATS Bus Stops</caption>
                            <thead>
                                <tr>
                                    <th class="ui-state-default"></th>
                                    <th class="ui-state-default"></th>
                                    <th class="ui-state-default">Bus Stop</th>
                                    <th class="ui-state-default">Routes</th>
                                </tr>
                            </thead>
                            <tbody></tbody>
                       </table>
                    </div>
                    <div id="park-and-rides" class="selected-data hidden">
                        <table class="datatable">
                            <caption>3 Nearest CATS Park & Ride</caption>
                            <thead>
                                <tr>
                                    <th class="ui-state-default"></th>
                                    <th class="ui-state-default"></th>
                                    <th class="ui-state-default">Bus Stop</th>
                                    <th class="ui-state-default">Address</th>
                                    <th class="ui-state-default">Routes</th>
                                </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                    </div>
                    <div id="light-rail-stops" class="selected-data hidden">
                        <table class="datatable">
                            <caption>3 Nearest CATS Lynx Stops</caption>
                            <thead>
                                <tr>
                                    <th class="ui-state-default"></th>
                                    <th class="ui-state-default"></th>
                                    <th class="ui-state-default">Bus Stop</th>
                                </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                    </div>
                </div>
                <h3 id="SERVICES"><a href="#">Services</a></h3>
                <div>
                    <div class="selectedLocation">No property currently selected.</div>
                    <div id="parks" class="selected-data hidden">
                        <table class="datatable">
                            <caption>3 Nearest Parks</caption>
                            <thead>
                                 <tr>
                                      <th class="ui-state-default"></th>
                                      <th class="ui-state-default"></th>
                                      <th class="ui-state-default">Park</th>
                                      <th class="ui-state-default">Address</th>
                                 </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                    </div>
                    <div id="libraries" class="selected-data hidden">
                        <table class="datatable">
                            <caption>5 Nearest Libraries</caption>
                            <thead>
                                <tr>
                                    <th class="ui-state-default"></th>
                                    <th class="ui-state-default"></th>
                                    <th class="ui-state-default">Library</th>
                                    <th class="ui-state-default">Address</th>
                                </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                    </div>
                    <div id="fire-stations" class="selected-data hidden">
                        <table class="datatable">
                            <caption>3 Nearest Fire Stations</caption>
                            <thead>
                                <tr>
                                    <th class="ui-state-default"></th>
                                    <th class="ui-state-default"></th>
                                    <th class="ui-state-default">Fire Station</th>
                                    <th class="ui-state-default">Type</th>
                                    <th class="ui-state-default">Address</th>
                                </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                    </div>
                </div>
                
                <h3 id="MAPCONTROLS"><a href="#">Map Controls</a></h3>
                <div>
                    <h5>Map Layers</h5>
                    <div id="layerswitcher"></div>
                    <h5 class="opacityControl">Layer Opacity</h5>
                    <select id="opacitydll" class="opacityControl"></select>
                    <div id="opacitySlider" class="opacityControl"></div>
                    <span id="layerOpacity" class="alignright opacityControl">Layer Opacity: 50%</span>
                </div>
                <h3 id="LEGEND"><a href="#">Legend</a></h3>
                <div>
                    <img src="img/legend.png" />
                </div>
                    
            </div>
        
		</aside>
		
		<!-- Map -->
		<div id="map-container" class="ui-widget-content ui-corner-all boxshadow">
			<div id="map" class="ui-corner-bottom"></div>
		</div>
		 
		 
		<footer>
			<div class="alignright smallfont" id="footer-text">
				<a href="http://code.google.com/p/geoportal/" title="GeoPortal">Project Page</a>
			</div>
		</footer>
	
	</div> <!--! end of #container -->


	<!-- JavaScript at the bottom for fast page loading -->
  
	<!-- Grab Google CDN's jQuery and jQuery UI -->
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
	<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/jquery-ui.min.js"></script>
	
	<!-- Map configuration file -->
	<script src="js/config.js"></script>
	
	<!-- Scripts for leaflet maps -->
	<!--<script src="js/libs/leaflet/leaflet.js"></script>
	<script src="js/map-leaflet.js"></script>-->
	
	<!-- Scripts for openlayers map -->
	<!--<script src="http://openlayers.org/api/OpenLayers.js"></script>
	<script src="js/map-ol.js"></script>-->
	
	<!-- Scripts for google maps - note you'll need to get a API key for the Earth API at http://code.google.com/apis/loader/signup.html -->
	<script src="http://maps.google.com/maps/api/js?v=3.7&sensor=false&libraries=geometry"></script>
    <script src="https://www.google.com/jsapi?key=ABQIAAAAm9Ct4PrMS0FyB27XUOQdYxQDpyRrWM6RoTuqCrFMtXdZ7RhO0xRSGo6XflSTl5uke-kxmtHnLXgNJQ"></script>
    <script src="js/libs/google_earth_integration.js"></script>
	<script src="js/map-gm.js"></script>
	
	 
	<!-- scripts concatenated and minified via ant build script-->
	<script src="js/plugins.js"></script>
	<script src="js/script.js"></script>
	
	<!-- end scripts-->


	<!-- The following content is not displayed at run time -->
     
	<!-- Welcome screen - jQuery UI Dialog -->
	<div id="search-dialog" title="Search Help" class="hidden">
		<p>
		The secrect to successful searches is to <em>let the search box do the work for you</em>. 
		Select a match using either the mouse or the up/down arrow keys and Enter.
		</p>
		<p><span class="ui-icon ui-icon-circle-check alignleft"></span><strong>Address</strong>: Enter the first part of the address. Ex: for 700 North Tryon Street, try <em>700 n</em></p>
		<p><span class="ui-icon ui-icon-circle-check alignleft"></span><strong>Place</strong>: Enter any part of a place name. Ex: type <em>carolina</em></p>
		<p><span class="ui-icon ui-icon-circle-check alignleft"></span><strong>Street</strong>: Enter the name of the street. Ex: type <em>ruth</em></p>
		<p><span class="ui-icon ui-icon-circle-check alignleft"></span><strong>Intersection</strong>: Enter a street name, followed by an &amp;. Ex: type <em>ruth &amp;</em></p>
		<p><span class="ui-icon ui-icon-circle-check alignleft"></span><strong>Parcel ID</strong>: Enter an 8-digit Parcel ID. Ex: type <em>11111111</em></p>
	</div>
     

</body>
</html>